// c7n 组件变成 ued 样式的样式覆盖文件

@import '~choerodon-ui/lib/style/themes/default.less';
@import '~antd/lib/style/themes/default.less';
// @import '~cpaas-front/lib/assets/styles/antd-override.less';
@import '~cpaas-front/lib/assets/styles/variables.less';
@import '~cpaas-front/lib/assets/styles/mixins.less';

:global {
  // 层级比正常的 antd 样式 高一层
  .ant-input {
    padding: 4px 8px;
    border-radius: 4px !important;
    font-size: 12px;
    line-height: 20px;
  }
  .ant-select-selection {
    border-radius: 4px !important;
  }
  // 联合覆盖 Form.Item > Input
  .c7n-pro-form-item-required
    .c7n-pro-form-item-children
    .c7n-pro-input:not(.c7n-pro-input-disabled):not(:disabled),
  .c7n-pro-form-item-required
    .c7n-pro-form-item-children
    .c7n-pro-input-number:not(.c7n-pro-input-number-disabled),
  .c7n-pro-form-item-required
    .c7n-pro-form-item-children
    .c7n-pro-cascader-picker:not(.c7n-pro-cascader-picker-disabled):not(:disabled),
  .c7n-pro-form-item-required .c7n-pro-form-item-children .c7n-pro-time-picker-input:not(:disabled),
  .c7n-pro-form-item-required
    .c7n-pro-form-item-children
    :not(.c7n-pro-select-disabled)
    > .c7n-pro-select-selection:not(:disabled) {
    border-color: @cpaas-primary-color-3-yellow;
  }

  .c7n-pro-form-item-required.has-error
    .c7n-pro-form-item-children
    .c7n-pro-input:not(.c7n-pro-input-disabled):not(:disabled),
  .c7n-pro-form-item-required.has-error
    .c7n-pro-form-item-children
    .c7n-pro-input-number-input:not(:disabled),
  .c7n-pro-form-item-required.has-error
    .c7n-pro-form-item-children
    .c7n-pro-input-number:not(:disabled),
  .c7n-pro-form-item-required.has-error
    .c7n-pro-form-item-children
    .c7n-pro-cascader-picker:not(.c7n-pro-cascader-picker-disabled):not(:disabled),
  .c7n-pro-form-item-required.has-error
    .c7n-pro-form-item-children
    .c7n-pro-time-picker-input:not(:disabled),
  .c7n-pro-form-item-required.has-error
    .c7n-pro-form-item-children
    :not(.c7n-pro-select-disabled)
    > .c7n-pro-select-selection:not(:disabled) {
    border-color: @form-item-has-error-color;
    background-color: #fff;
  }

  .c7n-pro-form-item-required
    .c7n-pro-form-item-children
    .c7n-pro-input-number:not(.c7n-pro-input-disabled):not(:disabled):focus,
  .c7n-pro-form-item-required
    .c7n-pro-form-item-children
    .c7n-pro-input:not(.c7n-pro-input-disabled):not(:disabled):focus {
    // 去掉 box-shadow
    box-shadow: none;
  }
  .c7n-pro-field-label-vertical label,
  .c7n-pro-field-label label {
    line-height: 0.28rem;
  }

  // 单独的组件

  .c7n-pro-input {
    // input

    padding: 4px 8px;
    border-radius: 4px;
    .cpaas-font-size(12px);

    &:focus {
      box-shadow: 0 0 2px 1px @cpaas-primary-color-2;
    }

    // FIXME: 待确定是否按照 UI 给的 设计
    &-spec {
      width: 238px;
      min-width: 138px;
      max-width: 438px;

      &-special {
        width: 180px;
      }
    }
  }

  .c7n-pro-btn:not(.c7n-pro-btn-flat) {
    // button
    line-height: 1.5;
    display: inline-block;
    font-weight: 400;
    text-align: center;
    touch-action: manipulation;
    cursor: pointer;
    background-image: none;
    border: 1px solid transparent;
    white-space: nowrap;
    padding: 0 15px;
    font-size: 12px;
    border-radius: 2px;
    height: 28px;
    user-select: none;
    transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    position: relative;
    // color: #333;
    // background-color: #fff;
    border-color: #d9d9d9;

    &-main {
      border-color: #666;
      color: #666;

      &:active,
      &:focus,
      &:hover {
        border-color: @cpaas-primary-color;
        color: @cpaas-primary-color;
      }
    }

    &.c7n-pro-btn-primary {
      background-color: @cpaas-primary-color;
      border-color: @cpaas-primary-color;
      color: #fff;

      &:hover {
        color: #fff;
        background-color: @cpaas-primary-btn-hover-color;
        border-color: @cpaas-primary-btn-hover-color;
      }
    }
  }

  .c7n-pro-field-label,
  .c7n-pro-field-wrapper {
    padding: 0.1rem 0;
  }

  .c7n-pro-field-label:after {
    // content: ':';
    width: 0;
    margin: 0 10px 0 2px;
    color: #333;
    position: relative;
    top: -0.5px;
  }

  .c7n-popover-message {
    font-size: 13px;
    &-title {
      padding-left: 21px;
    }
  }

  .c7n-pro-field-required.c7n-pro-field-label::after {
    //content: ':';
  }

  .c7n-pro-field-required.c7n-pro-field-label::before {
    display: inline-block;
    margin-right: 4px;
    content: '*';
    line-height: 1;
    font-size: 12px;
    color: #f5222d;
  }

  .c7n-pro-select-clear-button,
  .c7n-pro-calendar-picker-clear-button {
    background: transparent;
  }

  .c7n-pro-select-suffix .icon-search:before {
    content: '\E670';
    display: block;
    font-family: anticon, sans-serif;
    color: rgba(0, 0, 0, 0.25);
    font-size: 12px;
    top: 3px;
    right: 7px;
    position: relative;
  }

  .c7n-pro-select-suffix .icon-baseline-arrow_drop_down:before {
    content: '\E61D';
    display: block;
    font-family: anticon, sans-serif;
    font-size: 12px;
    color: rgba(0, 0, 0, 0.25);
  }

  .c7n-pro-calendar-picker-suffix .icon-date_range:before {
    content: '\E6BB';
    font-family: anticon, sans-serif;
    font-size: 12px;
    color: rgba(0, 0, 0, 0.25);
    display: inline-block;
    line-height: 1;
    position: absolute;
    top: 8px;
    right: 13px;
  }

  .c7n-pro-select-trigger {
    position: relative;
    top: 4px;
    right: 7px;
  }

  .c7n-pro-select-expand .c7n-pro-select-trigger {
    top: 2px;
  }

  .c7n-pro-pagination .c7n-pro-select {
    padding-right: 0.3rem !important;
  }

  .c7n-pro-checkbox {
    // checkbox
    // Checkbox 中间状态
    &.c7n-pro-checkbox-indeterminate {
      .c7n-pro-checkbox-inner {
        background-color: #fff;

        &:after {
          left: 3px;
          top: 3px;
          width: 8px;
          height: 8px;
          border-width: 8px;
          border-color: @cpaas-primary-color-2;
        }
      }
    }
  }

  .c7n-pro-notification {
    // notification
    &-notice {
      &.success {
        border-left: 3px solid @cpaas-notification-success-color;
      }

      &.info {
        border-left: 3px solid @cpaas-notification-info-color;
      }

      &.warn {
        border-left: 3px solid @cpaas-notification-warn-color;
      }

      &.error {
        border-left: 3px solid @cpaas-notification-error-color;
      }
    }
  }

  .c7n-pro-table-wrapper {
    .c7n-pro-table {
      .c7n-pro-table-scroll > .c7n-pro-table-body {
        border-width: 0 1px;
        border-style: solid;
        border-color: #e8e8e8;
        border-collapse: collapse;

        > table,
        .c7n-pro-table-fixed {
          // 去除table多出的 left border
          border-left: 0;
        }
      }

      .c7n-pro-table-thead > tr > th.c7n-pro-table-selection-column,
      .c7n-pro-table-tbody > tr > td.c7n-pro-table-selection-column {
        width: 62px - @cpaas-gutter;
        min-width: 62px - @cpaas-gutter;
        text-align: initial;
      }

      table .c7n-pro-table-tbody > tr > td {
        padding-left: @cpaas-gutter;
        padding-right: @cpaas-gutter;
      }

      // table
      .c7n-pro-table-thead > tr > th {
        .cpaas-font-size();
        padding: 0 @cpaas-gutter;
        line-height: 25px;
        min-height: 40px;
        height: 40px;

        &.c7n-pro-table-column-has-filters {
          position: relative;
        }
      }
    }
    .c7n-pro-btn:not(.c7n-pro-btn-flat).c7n-pro-btn-primary {
      background-color: @cpaas-primary-color-2;
      border-color: @cpaas-primary-color-2;
      color: #fff;

      &:hover {
        background-color: @cpaas-primary-color-2-hover;
        border-color: @cpaas-primary-color-2-hover;
        color: #fff;
      }
    }
  }

  .c7n-pro-tabs {
    // tabs
    // editable-card
    &.c7n-pro-tabs-card.c7n-pro-tabs-editable-card > .c7n-pro-tabs-bar .c7n-pro-tabs-tab {
      padding: @cpaas-tabs-card-tab-padding;
      color: @cpaas-tabs-tab-color;
      .cpaas-font-size(14px);

      &.c7n-pro-tabs-tab-active {
        color: @cpaas-primary-color-2;
      }

      &.c7n-pro-tabs-tab-disabled {
        color: @cpaas-color-disabled;
      }
    }

    &.c7n-pro-tabs-line > .c7n-pro-tabs-bar .c7n-pro-tabs-tab {
      padding: @cpaas-tabs-line-vertical-tab-padding;
      margin: @cpaas-tabs-line-vertical-tab-margin;
      color: @cpaas-tabs-tab-color;
      .cpaas-font-size(14px);

      &.c7n-pro-tabs-tab-active {
        color: @cpaas-primary-color-2;
      }

      &.c7n-pro-tabs-tab-disabled {
        color: @cpaas-color-disabled;
      }
    }

    &.c7n-pro-tabs-vertical.c7n-pro-tabs.c7n-pro-tabs-line > .c7n-pro-tabs-bar .c7n-pro-tabs-tab {
      // tabs的tab在水平排列不需要margin
      margin-right: 0;
    }

    &.c7n-pro-tabs-line.c7n-pro-tabs-minor > .c7n-pro-tabs-bar {
      // TODO: 等确定再做
      //border: 0 none;
      //background-color: #f4f6f8;
      //box-shadow: #f4f6f8 inset 1px 0;
      //min-width: 128px;
      //
      //.c7n-pro-tabs-tab {
      //  padding: @cpaas-tabs-line-horizontal-tab-padding;
      //  color: @cpaas-tabs-tab-color;
      //  margin: 0;
      //
      //  &.c7n-pro-tabs-tab-active {
      //    font-weight: bold;
      //    color: @cpaas-primary-color-2;
      //  }
      //
      //  &.c7n-pro-tabs-tab-disabled {
      //    color: @cpaas-color-disabled;
      //  }
      //}
      //
      //.c7n-pro-tabs-ink-bar {
      //  // FIXME: 由于 是 style 的样式 所以这里使用 !important
      //  display: none !important;
      //}
    }
  }

  .c7n-pro-collapse {
    .c7n-pro-collapse-content-box .c7n-pro-form-item > .c7n-pro-form-item-label {
      text-align: left;
    }
  }

  // version
}

:global {
  .c7n-pro-calendar {
    // header
    .c7n-pro-calendar-header {
      .c7n-pro-calendar {
        &-prev-month-btn,
        &-next-month-btn,
        &-prev-year-btn,
        &-next-year-btn {
          padding: 0;
        }

        &-prev-month-btn {
          left: @cpaas-gutter + @cpaas-gutter-md + 8;
        }

        &-next-month-btn {
          right: @cpaas-gutter + @cpaas-gutter-md + 8;
        }

        &-prev-year-btn {
          left: @cpaas-gutter;
        }

        &-next-year-btn {
          right: @cpaas-gutter;
        }
      }
    }

    .c7n-pro-calendar-year-panel-header {
      .c7n-pro-calendar-year-panel {
        &-prev-decade-btn,
        &-next-decade-btn {
          padding: 0;
        }

        &-prev-decade-btn {
          left: @cpaas-gutter;
        }

        &-next-decade-btn {
          right: @cpaas-gutter;
        }
      }
    }

    .c7n-pro-calendar-decade-panel-header {
      .c7n-pro-calendar-decade-panel {
        &-prev-century-btn,
        &-next-century-btn {
          padding: 0;
        }

        &-prev-century-btn {
          left: @cpaas-gutter;
        }

        &-next-century-btn {
          right: @cpaas-gutter;
        }
      }
    }

    // body
    //.c7n-pro-calendar-cell {
    //  padding: 2px 0;
    //  > .c7n-pro-calendar-date {
    //    margin: 0 4px;
    //  }
    //}
  }
}

:global {
  .c7n-pro-tabs {
    &.c7n-pro-tabs-vertical {
      > .c7n-pro-tabs-bar {
        background-color: @cpaas-simple-bgc-color;
        // width: 12.5%;

        > .c7n-pro-tabs-nav-container {
          > .c7n-pro-tabs-nav-wrap {
            > .c7n-pro-tabs-nav-scroll {
              > .c7n-pro-tabs-nav {
                .c7n-pro-tabs-tab {
                  .cpaas-font-size(14px);
                  color: @cpaas-tabs-tab-color;
                  text-align: left;
                  padding: 9px 9px 9px @cpaas-gutter;

                  &-active {
                    background-color: #fff;
                    color: @cpaas-primary-color-2;
                  }

                  &-disabled {
                    color: @cpaas-color-disabled;
                  }
                }

                > .c7n-pro-tabs-ink-bar {
                  // 要操作
                  display: none !important;
                }
              }
            }
          }
        }
      }
    }
  }
}

:global {
  /* c7n-pro-table */

  .c7n-pro-checkbox-inner {
    border: 1px solid #d9d9d9;
  }

  .c7n-pro-checkbox-inner::after {
    top: 0;
    left: 0.04rem;
  }

  .c7n-pro-checkbox-indeterminate .c7n-pro-checkbox-inner::after {
    top: 0.06rem;
    left: 0.02rem;
  }

  .c7n-pro-table-row-height-fixed td {
    // padding: 8px;
    padding-top: 4px;
    padding-bottom: 4px;
    // padding-left: 4px;
    // padding-right: 4px;
  }

  .c7n-pro-table-wrapper .c7n-pro-table .c7n-pro-table-thead > tr > th:first-child {
    padding: 0;
  }

  .c7n-pro-table-wrapper .c7n-pro-table .c7n-pro-table-thead > tr > th:not(:first-child) {
    padding: 0 8px;
  }

  .c7n-pro-table-wrapper
    .c7n-pro-table
    table
    .c7n-pro-table-tbody
    > tr
    > td.c7n-pro-table-selection-column {
    padding-left: 0.01rem;
    padding-right: 0.01rem;
  }

  .c7n-pro-table-row-highlight.c7n-pro-table-row:hover > td,
  .c7n-pro-table-row-hover > td,
  .c7n-pro-table-row-highlight.c7n-pro-table-row:hover + .c7n-pro-table-expanded-row > td,
  .c7n-pro-table-row-hover + .c7n-pro-table-expanded-row > td {
    background: @primary-1;
  }

  // .c7n-pro-table-cell .c7n-pro-table-cell-inner {
  //   height: 24px!important;
  //   line-height: 24px;
  // }

  .c7n-pro-table-cell-editable .c7n-pro-table-cell-inner {
    &:not([class$='-required']):not([disabled]):not([class$='-invalid']) {
      border: 1px solid #d9d9d9;
    }
  }

  .c7n-pro-table-cell-inner {
    border: none;
    border-radius: 4px;
  }

  .c7n-pro-table-cell-editable.c7n-pro-table-cell-required .c7n-pro-table-cell-inner {
    // background-color: #fffbdf;
    // border-color: #ffbc00;
    border-radius: 4px;
  }

  .c7n-pro-table-row-current.c7n-pro-table-row-highlight > td,
  .c7n-pro-table-row-current:hover.c7n-pro-table-row-highlight > td,
  .c7n-pro-table-row-current.c7n-pro-table-row-highlight + .c7n-pro-table-expanded-row > td,
  .c7n-pro-table-row-current:hover.c7n-pro-table-row-highlight + .c7n-pro-table-expanded-row > td {
    background: @primary-1;
  }

  /* c7n-pro-table end */

  /* c7n-pro-btn */

  .page-head-operator .c7n-pro-btn-primary,
  .page-head-operator .c7n-pro-btn-primary:active,
  .page-head-operator .c7n-pro-btn-primary:focus {
    background-color: @cpaas-primary-color;
    border-color: @cpaas-primary-color;
  }

  .page-head-operator > .c7n-pro-btn:not(:last-child),
  .page-head-operator > .page-head-operation:not(:last-child) {
    margin-left: 8px;
  }

  .c7n-pro-btn.c7n-pro-btn-icon-only,
  .c7n-pro-btn.c7n-pro-btn-icon-only:not(.c7n-pro-btn-flat) {
    border-radius: 50%;
    padding: 0;
  }

  .c7n-pro-btn:not(.c7n-pro-btn-flat) {
    box-shadow: none;
    box-sizing: border-box;
    border-radius: 2px;
  }

  .c7n-pro-btn-default:focus {
    border-color: @cpaas-primary-color-2;
  }

  .c7n-pro-btn-primary {
    color: #fff;
    background-color: @cpaas-primary-color-2;
    border-color: @cpaas-primary-color-2;
  }

  .c7n-pro-btn-primary.c7n-pro-btn-flat {
    color: @cpaas-primary-color-2;
    background-color: transparent;
    border-color: transparent;
  }

  .c7n-pro-btn-primary.c7n-pro-btn-raised:enabled:hover {
    color: #fff;
    background-color: @cpaas-primary-btn-hover-color;
    border-color: @cpaas-primary-btn-hover-color;
  }

  .c7n-pro-btn + .c7n-pro-btn {
    margin-left: 0.08rem;
  }

  .c7n-pro-pagination-pager {
    border-color: transparent;
    padding: 0;
    top: -2px;
  }

  /* c7n-pro-btn end */

  /* c7n-pro-select */
  .c7n-pro-select {
    border-radius: 4px;
    &:focus {
      box-shadow: 0 0 2px 1px @cpaas-primary-color-2;
    }
  }

  [class$='-required']:not([disabled]):not([class$='-invalid']) {
    .c7n-pro-input-number:not([disabled]) {
      background-color: #fffbdf;
      border-color: #ffbc00;
    }
  }

  .c7n-pro-select-dropdown-menu-item:hover {
    background: @primary-1;
  }

  .c7n-pro-input-number,
  .c7n-pro-calendar-picker {
    border-radius: 4px;
    &:focus {
      box-shadow: 0 0 2px 1px @cpaas-primary-color-2;
    }
  }

  .c7n-pro-table {
    border-left: 0;
    border-bottom: 0;

    .c7n-pro-table-placeholder {
      border-bottom: 1px solid #e8e8e8;
    }

    .c7n-pro-table-row {
      &:last-child {
        td {
          border-bottom: 1px solid #e8e8e8;
        }
      }
    }

    .c7n-pro-table-body {
      & > table {
        padding: 0;
      }

      & > tr {
        & > td {
          border-bottom: 1px solid #e8e8e8;
        }
      }
    }

    .c7n-pro-table-thead {
      & > tr {
        & > th {
          // text-align: left;
          background-color: rgba(0, 0, 0, 0.04) !important;
          color: #333;
          // FIXME: 不知道为什么会有这个加粗
          font-weight: 500;
          padding: 5px 8px;
          border-bottom: 1.1px solid rgba(0, 0, 0, 0.16);
        }
      }
    }
  }
  .c7n-pro-table-thead.c7n-pro-table-column-resizable .c7n-pro-table-cell {
    border-left: 1px solid #e8e8e8;
    border-bottom: 1px solid #e8e8e8;
    border-right: 0;
  }
  .c7n-pro-table-bordered .c7n-pro-table-cell,
  .c7n-pro-table-bordered .c7n-pro-table-cell[colspan] {
    border-bottom: 1px solid #e8e8e8;
    border-left: none;
  }
  .c7n-pro-table-empty-row {
    border-bottom: 1px solid #e8e8e8;
    border-left: 1px solid #e8e8e8;
  }
  .c7n-pro-table-wrapper .c7n-pro-table table .c7n-pro-table-tbody > tr > td {
    padding: 8px 8px;
    border-left: 1px solid #e8e8e8;
  }
  .c7n-pro-table-cell-editable {
    padding: 8px 16px !important;
  }
  .c7n-pro-table-bordered.c7n-pro-table,
  .c7n-pro-table-bordered .c7n-pro-table-filter-bar {
    border-right: none;
    border-left: none;
  }

  /* c7n-pro-switch */
  .c7n-pro-switch-wrapper {
    padding: 0;
    height: 22px;
    min-width: 44px;
    line-height: 20px;
  }

  .c7n-pro-switch:checked + .c7n-pro-switch-label {
    background-color: #29bece;

    &::after {
      background-color: #fff;
      transform: translateX(-100%);
      margin-left: -2px;
    }
  }

  .c7n-pro-switch-label {
    min-width: 44px;
    height: 22px;
    background-color: rgba(0, 0, 0, 0.25);
    left: 2px;

    &::after {
      width: 18px;
      height: 18px;
    }
  }

  /* c7n-pro-switch end */
}

:global {
  // Select 不要边框
  .select-no-border.c7n-pro-select {
    // 没有边框的select
    > div {
      box-shadow: none;
      background-color: transparent;
      border: 0 none;
    }
  }
  // 高度问题
  .c7n-select-auto-complete.c7n-select {
    .c7n-select-selection--single {
      line-height: 0;
    }
  }
  // treeSelect增加边框
  .c7n-select-selection__rendered {
    display: inline-block;
    height: 28px;
    border: 0.01rem solid rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    line-height: 24px;
  }

  /* 详情页的表单和折叠面板样式 */

  .ued-detail-wrapper {
    // 折叠面板统一样式
    .form-collapse,
    .c7n-pro-collapse {
      border: none;
      background-color: #fff;

      .c7n-pro-collapse-item.c7n-pro-collapse-no-arrow .c7n-pro-collapse-header {
        padding: 0;
      }

      .c7n-pro-collapse-item {
        border-bottom: none;
        margin-bottom: 24px;
        background-color: #fafafa;

        .c7n-pro-collapse-header {
          height: 48px;
          line-height: 48px;

          & > i {
            font-weight: bold;
            margin-left: 8px;
            color: rgb(41, 190, 206);
          }

          & > h3 {
            text-indent: 16px;
            display: inline-block;
            line-height: 1.17em;
          }

          & > a {
            margin-left: 16px;
          }
        }

        .c7n-pro-collapse-content {
          border-top: none;

          .c7n-pro-collapse-content-box {
            padding-bottom: 0;

            .last-form-item {
              margin-bottom: 0;

              .c7n-pro-row {
                margin-bottom: 0;
              }

              .c7n-pro-form-item-control-wrapper
                .c7n-pro-form-item-control
                .c7n-pro-form-item-children
                pre {
                margin-bottom: 0;
              }
            }
          }
        }
      }

      /* UED行样式 */
      // 纯展示行
      .read-row {
        line-height: 20px;
        margin-bottom: 16px;

        .c7n-pro-col-8 > .c7n-pro-row.c7n-pro-form-item {
          & > .c7n-pro-col-9.c7n-pro-form-item-label {
            line-height: 20px;

            label {
              color: #666;
            }
          }

          & > .c7n-pro-col-15.c7n-pro-form-item-control-wrapper {
            & > .c7n-pro-form-item-control {
              line-height: 20px;
            }
          }

          margin-bottom: 0;
        }
      }

      // 纯编辑行
      .writable-row {
        margin-bottom: 16px;

        & > .c7n-pro-col-8 {
          .c7n-pro-calendar-picker,
          .c7n-pro-input-number {
            width: 100%;
          }
          & > .c7n-pro-row.c7n-pro-form-item {
            margin-bottom: 0;

            & > .c7n-pro-col-9.c7n-pro-form-item-label {
              line-height: 28px;
              color: #666;

              label {
                color: #666;
              }
            }

            & > .c7n-pro-col-15.c7n-pro-form-item-control-wrapper > .c7n-pro-form-item-control {
              line-height: 28px;
            }
          }
        }
      }

      // 混合行
      .inclusion-row > .c7n-pro-col-8 {
        .c7n-pro-calendar-picker,
        .c7n-pro-input-number {
          width: 100%;
        }
        & > .c7n-pro-row {
          margin-bottom: 16px;

          & > div {
            line-height: 28px;
          }
        }

        & > .c7n-pro-row.c7n-pro-form-item {
          & > .c7n-pro-col-9.c7n-pro-form-item-label {
            line-height: 28px;
            color: #666;

            label {
              color: #666;
            }
          }

          & > .c7n-pro-col-15.c7n-pro-form-item-control-wrapper > .c7n-pro-form-item-control {
            line-height: 28px;
          }
        }
      }

      // 编辑状态半行
      .half-row {
        display: flex;
        margin-bottom: 16px;

        .c7n-pro-row.c7n-pro-form-item {
          margin-bottom: 0;

          & > .c7n-pro-form-item-label {
            width: 25%;
            margin-right: -6px;
            float: left;
            line-height: 28px;

            label {
              color: #666;
            }
          }

          & > .c7n-pro-form-item-control-wrapper {
            width: 75%;
            float: left;
            color: #333;
            line-height: 28px;

            .c7n-pro-form-item-control {
              line-height: 28px;
            }
          }
        }
      }

      // 纯展示半行
      .read-half-row {
        display: flex;
        margin-bottom: 16px;

        .c7n-pro-row.c7n-pro-form-item {
          margin-bottom: 0;

          & > .c7n-pro-form-item-label {
            width: 25%;
            margin-right: -6px;
            float: left;
            line-height: 20px;

            label {
              color: #666;
            }
          }

          & > .c7n-pro-form-item-control-wrapper {
            width: 75%;
            float: left;
            color: #333;
            line-height: 20px;

            .c7n-pro-form-item-control {
              line-height: 20px;
            }
          }
        }
      }

      // 表单校验文字样式
      .c7n-pro-form-item-control-wrapper {
        .c7n-pro-form-item-control.has-error.c7n-pro-form-item-required .c7n-pro-form-explain {
          margin-top: 2px;
        }
      }
    }
  }

  // 表单字段 通用样式
  .ued-form-field {
    width: 100%;
  }

  // ------------ List Page -----------

  .search-btn-more {
    padding-left: 24px !important;

    .c7n-pro-form-item-children {
      & > button:not(:last-child),
      & > a:not(:last-child) {
        margin-right: 8px;
      }
    }
  }

  .more-fields-form {
    :global {
      .c7n-pro-input-number,
      .c7n-pro-calendar-picker,
      .c7n-pro-form-item {
        width: 100%;
      }
    }

    & > div.c7n-pro-form-item {
      margin-bottom: 3px;

      &:last-child {
        position: absolute;
        bottom: 0;
        left: 0;
        padding: 4px 0;
        margin-bottom: 0;
        z-index: 1;
        border-top: 1px solid #e8e8e8;
        background: rgba(255, 255, 255, 1);

        & .c7n-pro-form-item-children {
          float: right;
          margin-right: 12px;
        }
      }
    }
  }

  // 查询表单
  .table-list-search {
    margin-bottom: 16px;

    :global(.c7n-pro-form-item) {
      margin-bottom: 2px;

      &:global(.c7n-pro-form-item-with-help) {
        margin-bottom: 14px;
      }
    }
  }

  // 查询表单样式(集合table-list-search、more-fields-form)
  .more-fields-search-form {
    &.c7n-pro-form {
      margin-bottom: 16px;
    }

    :global {
      .c7n-pro-input-number,
      .c7n-pro-calendar-picker,
      .c7n-pro-form-item {
        width: 100%;
        margin-bottom: 0;
      }
    }
  }

  .table-list-operator {
    margin-bottom: 16px;

    button {
      margin-right: 8px;
    }
  }

  .table-list-form {
    .c7n-pro-form-inline .c7n-pro-form-item {
      margin-bottom: 24px;
      margin-right: 0;
      display: flex;

      > .c7n-pro-form-item-label {
        width: auto;
        line-height: 32px;
        padding-right: 8px;
      }

      .c7n-pro-form-item-control {
        line-height: 32px;
      }
    }

    .c7n-pro-form-item-control-wrapper {
      flex: 1;
    }

    .submit-buttons {
      white-space: nowrap;
      margin-bottom: 24px;
    }
  }

  @media screen and (max-width: @screen-lg) {
    .tableListForm :global(.c7n-pro-form-item) {
      margin-right: 24px;
    }
  }

  @media screen and (max-width: @screen-md) {
    .tableListForm :global(.c7n-pro-form-item) {
      margin-right: 8px;
    }
  }

  // ------------ List Page -----------

  /* 详情页面 Card, 二级标题 */

  .c7n-card {
    // 表单, 表格
    &.ued-detail-card,
    &.ued-detail-card-table {
      > .c7n-card-head {
        border-bottom-color: @cpaas-bgc-color-dark;
        padding: @cpaas-gutter-md @cpaas-gutter;
        position: relative;

        &::before {
          content: '';
          position: absolute;
          left: 0;
          top: 16px;
          width: 3px;
          height: 14px;
          background-color: @cpaas-primary-color;
          pointer-events: none;
        }

        > .c7n-card-head-wrapper {
          > .c7n-card-head-title {
            padding: 0;

            > h3 {
              margin: 0;
              color: @cpaas-form-disabled-wrapper-color;
              font-weight: normal;
              .cpaas-font-size(14px);
            }
          }
        }
      }

      > .c7n-card-body {
        // normal form
        .c7n-pro-form-item {
          &-label {
            text-align: left;
            color: @cpaas-form-disabled-label-color;
          }

          &-control {
            color: @cpaas-form-disabled-wrapper-color;

            .c7n-pro-calendar-picker,
            .c7n-pro-input-number {
              width: 100%;
            }

            .c7n-pro-form-explain {
              margin-top: 2px;
            }
          }

          margin-bottom: 0;

          &.c7n-pro-form-item-with-help {
            margin-bottom: @cpaas-gutter-inline;
          }
        }

        /* UED行样式 */
        // 纯展示行
        .read-row {
          line-height: 20px;
          margin-bottom: 16px;

          .c7n-pro-col-8 > .c7n-pro-row.c7n-pro-form-item {
            & > .c7n-pro-col-9.c7n-pro-form-item-label {
              line-height: 20px;

              label {
                color: #666;
              }
            }

            & > .c7n-pro-col-15.c7n-pro-form-item-control-wrapper {
              & > .c7n-pro-form-item-control {
                line-height: 20px;
              }
            }

            margin-bottom: 0;
          }
        }

        // 纯编辑行
        .writable-row {
          margin-bottom: 16px;

          & > .c7n-pro-col-8 {
            & > .c7n-pro-row.c7n-pro-form-item {
              margin-bottom: 0;

              & > .c7n-pro-col-9.c7n-pro-form-item-label {
                line-height: 28px;
                color: #666;

                label {
                  color: #666;
                }
              }

              & > .c7n-pro-col-15.c7n-pro-form-item-control-wrapper > .c7n-pro-form-item-control {
                line-height: 28px;
              }
            }
          }
        }

        // 混合行
        .inclusion-row > .c7n-pro-col-8 {
          & > .c7n-pro-row {
            margin-bottom: 16px;

            & > div {
              line-height: 28px;
            }
          }

          & > .c7n-pro-row.c7n-pro-form-item {
            & > .c7n-pro-col-9.c7n-pro-form-item-label {
              line-height: 28px;
              color: #666;

              label {
                color: #666;
              }
            }

            & > .c7n-pro-col-15.c7n-pro-form-item-control-wrapper > .c7n-pro-form-item-control {
              line-height: 28px;
            }
          }
        }

        // 编辑状态半行
        .half-row {
          display: flex;
          margin-bottom: 16px;

          .c7n-pro-row.c7n-pro-form-item {
            margin-bottom: 0;

            & > .c7n-pro-form-item-label {
              width: 25%;
              margin-right: -6px;
              float: left;
              line-height: 28px;

              label {
                color: #666;
              }
            }

            & > .c7n-pro-form-item-control-wrapper {
              width: 75%;
              float: left;
              color: #333;
              line-height: 28px;

              .c7n-pro-form-item-control {
                line-height: 28px;
              }
            }
          }
        }

        // 纯展示半行
        .read-half-row {
          display: flex;
          margin-bottom: 16px;

          .c7n-pro-row.c7n-pro-form-item {
            margin-bottom: 0;

            & > .c7n-pro-form-item-label {
              width: 25%;
              margin-right: -6px;
              float: left;
              line-height: 20px;

              label {
                color: #666;
              }
            }

            & > .c7n-pro-form-item-control-wrapper {
              width: 75%;
              float: left;
              color: #333;
              line-height: 20px;

              .c7n-pro-form-item-control {
                line-height: 20px;
              }
            }
          }
        }

        // 最后一行表单
        .last-form-item {
          margin-bottom: 0;

          .c7n-pro-row {
            margin-bottom: 0;
          }

          .c7n-pro-form-item-control-wrapper
            .c7n-pro-form-item-control
            .c7n-pro-form-item-children
            pre {
            margin-bottom: 0;
          }
        }
      }
    }

    &.ued-detail-card {
      > .c7n-card-body {
        padding: @cpaas-gutter;
        padding-bottom: 24px;
      }
    }

    &.ued-detail-card-table {
      > .c7n-card-body {
        padding: @cpaas-gutter 0;

        .table-list-operator {
          display: flex;

          flex-direction: row-reverse;
          justify-content: flex-start;
          align-items: center;

          // TODO: 还需修改样式 间距
          // 所有按钮给一个左间距
          // 由于方向反转了 所以 是 last-child 没有 margin-left
          > .c7n-pro-btn,
          > .table-list-operation {
            margin: 0;
          }

          > .c7n-pro-btn:not(:last-child),
          > .table-list-operation:not(:last-child) {
            margin-left: @cpaas-gutter-sm;
          }
        }
      }
    }
  }

  /* Card 三级标题 */

  .c7n-card {
    // 表单, 表格
    &.ued-detail-card-third,
    &.ued-detail-card-table-third {
      > .c7n-card-head {
        //border-bottom-color: @cpaas-bgc-color-dark;
        border: 0;
        padding: @cpaas-gutter-md @cpaas-gutter;
        position: relative;

        > .c7n-card-head-wrapper {
          > .c7n-card-head-title {
            padding: 0;

            > h3 {
              margin: 0;
              color: #333;
              font-weight: normal;
              .cpaas-font-size(14px);
            }
          }
        }
      }
    }

    &.ued-detail-card-third {
      > .c7n-card-body {
        padding: @cpaas-gutter;
      }
    }

    &.ued-detail-card-table-third {
      > .c7n-card-body {
        padding: @cpaas-gutter 0;

        .table-list-operator {
          display: flex;

          flex-direction: row-reverse;
          justify-content: flex-start;
          align-items: center;

          // TODO: 还需修改样式 间距
          // 所有按钮给一个左间距
          // 由于方向反转了 所以 是 last-child 没有 margin-left
          > .c7n-pro-btn,
          > .table-list-operation {
            margin: 0;
          }

          > .c7n-pro-btn:not(:last-child),
          > .table-list-operation:not(:last-child) {
            margin-left: @cpaas-gutter-sm;
          }
        }
      }
    }
  }

  // 表格的操作按钮 的 父元素的class
  .table-operator {
    margin-bottom: 16px;
    display: flex;

    flex-direction: row-reverse;
    justify-content: flex-start;
    align-items: center;

    // TODO: 还需修改样式 间距
    // 所有按钮给一个左间距
    // 由于方向反转了 所以 是 lat-child 没有 margin-left
    > .c7n-pro-btn:not(:last-child),
    > .table-list-operation:not(:last-child) {
      margin: 0 0 0 @cpaas-gutter-sm;
    }
  }

  /* 编辑表格样式 */

  .ued-edit-form {
    /* UED行样式 */
    // normal form
    .c7n-pro-form-item {
      &-label {
        text-align: left;
        color: @cpaas-form-disabled-label-color;
      }

      &-control {
        color: @cpaas-form-disabled-wrapper-color;
      }

      margin-bottom: 0;

      &.c7n-pro-form-item-with-help {
        margin-bottom: @cpaas-gutter-inline;
      }
    }

    /* UED行样式 */
    // 纯展示行
    .read-row {
      line-height: 20px;
      margin-bottom: 16px;

      .c7n-pro-col-8 > .c7n-pro-row.c7n-pro-form-item {
        & > .c7n-pro-col-9.c7n-pro-form-item-label {
          line-height: 20px;

          label {
            color: #666;
          }
        }

        & > .c7n-pro-col-15.c7n-pro-form-item-control-wrapper {
          & > .c7n-pro-form-item-control {
            line-height: 20px;
          }
        }

        margin-bottom: 0;
      }
    }

    // 纯编辑行
    .writable-row {
      margin-bottom: 16px;

      & > .c7n-pro-col-8 {
        & > .c7n-pro-row.c7n-pro-form-item {
          margin-bottom: 0;

          & > .c7n-pro-col-9.c7n-pro-form-item-label {
            line-height: 28px;
            color: #666;

            label {
              color: #666;
            }
          }

          & > .c7n-pro-col-15.c7n-pro-form-item-control-wrapper > .c7n-pro-form-item-control {
            line-height: 28px;
          }
        }
      }
    }

    // 混合行
    .inclusion-row > .c7n-pro-col-8 {
      & > .c7n-pro-row {
        margin-bottom: 16px;

        & > div {
          line-height: 28px;
        }
      }

      & > .c7n-pro-row.c7n-pro-form-item {
        & > .c7n-pro-col-9.c7n-pro-form-item-label {
          line-height: 28px;
          color: #666;

          label {
            color: #666;
          }
        }

        & > .c7n-pro-col-15.c7n-pro-form-item-control-wrapper > .c7n-pro-form-item-control {
          line-height: 28px;
        }
      }
    }

    // 编辑状态半行
    .half-row {
      display: flex;
      margin-bottom: 16px;

      .c7n-pro-row.c7n-pro-form-item {
        margin-bottom: 0;

        & > .c7n-pro-form-item-label {
          width: 25%;
          margin-right: -6px;
          float: left;
          line-height: 28px;

          label {
            color: #666;
          }
        }

        & > .c7n-pro-form-item-control-wrapper {
          width: 75%;
          float: left;
          color: #333;
          line-height: 28px;

          .c7n-pro-form-item-control {
            line-height: 28px;
          }
        }
      }
    }

    // 纯展示半行
    .read-half-row {
      display: flex;
      margin-bottom: 16px;

      .c7n-pro-row.c7n-pro-form-item {
        margin-bottom: 0;

        & > .c7n-pro-form-item-label {
          width: 25%;
          margin-right: -6px;
          float: left;
          line-height: 20px;

          label {
            color: #666;
          }
        }

        & > .c7n-pro-form-item-control-wrapper {
          width: 75%;
          float: left;
          color: #333;
          line-height: 20px;

          .c7n-pro-form-item-control {
            line-height: 20px;
          }
        }
      }
    }

    // 最后一行表单
    .last-row {
      margin-bottom: 0;

      .c7n-pro-row {
        margin-bottom: 0;
      }

      .c7n-pro-form-item-control-wrapper
        .c7n-pro-form-item-control
        .c7n-pro-form-item-children
        pre {
        margin-bottom: 0;
      }
    }
  }
}
